/** @jsxImportSource @emotion/react */
import {jsx, css} from "@emotion/react";
import * as React from "react";
import {
    useTheme, PanelEnlargeCtx, useMMenuBarOcup,
    Text, Stack, StackItem,
} from "customize-easy-ui-component";

import { SearchDeviceBox } from "./SearchDeviceBox";
//import algoliasearch from "algoliasearch";
//import config from "./firebase-config";
//import {  usePaginateQueryDevice,  } from "./db";
//import { FollowingRecipes } from "./FollowingRecipes";


//import { useHistory } from "react-router-dom";
//@reach 的 Link 可以附带state ；
//import { Link, navigate, globalHistory } from "@reach/router";

//import useHistoryState from "use-history-state";
//import { useEffect } from "react";
//import { useInView } from 'react-intersection-observer'
//import { PullToRefresh,PullDownContent,RefreshContent,ReleaseContent } from "react-js-pull-to-refresh";
import { DevfilterContext } from "../context/DevfilterContext";
import {DeviceListInner} from "./DeviceListInner"
import {ContainLine, SearchTitle, TransparentInput} from "../comp/base"
import {DeviceListInner$key} from "./__generated__/DeviceListInner.graphql";
import {useContext} from "react";
import RoutingContext from "../routing/RoutingContext";
// import {Stack, StackItem,} from "../../UiDebugSave/sample/Stack";

interface DeviceListProps {
    eqps: DeviceListInner$key;
    //user: Todo_user$key;
    filter: any   //传递
}
export const DeviceList: React.FunctionComponent<
  DeviceListProps
> = props => {
  const theme = useTheme();
  //搜索编辑框的输入: 路由器prepare(){}进来之后，本组件内部还会进一步修改设备过滤器参数项。
  //【关键】简易搜索框的状态控制。把编辑操作变量和方法提升到共同父组件中，就能把内部组件的修改立刻反馈给兄弟组件去。
  const [query, setQuery] = React.useState<string>('');        //安排在共同祖先的组件添加状态变量操作函数。

 // const [queryResults,setQueryResults] = React.useState<any>( null );
  //const {filter:devfl, } =React.useContext(DevfilterContext);
  //console.log("DeviceList当前的查询 queryResults=", queryResults);
  //根据options选择结果，来组织后端的查询参数。
  //经过路由跳转的情况useState会重新初始化mount,还有一种仅仅是界面上同一大组件底下切换显示的不会经过路由，数据列表状态不变也不会触发去后端读取更新。
/*   const [filter, setFilter] = React.useState<any>({where: {cod: query===""?undefined:query, ...props.filter},
       offset:0,
       first:10,
       asc: false
   });*/

  //下层沉下去的 setIndex切换显示界面；
    const [index, setIndex] = React.useState(0);
    const {history } = useContext(RoutingContext);
    const {barHeight } = useMMenuBarOcup(history.routeData?.isExact);
  //根据query的改变来重新查询哪。useEffect若不添加props.filter依赖项，不会代码层面强报错的，可惜逻辑错误。
/*  React.useEffect(() => {
    let filtercomp={where: {cod: query===""?undefined:query, ...props.filter},
      offset:0,
      first:10,
      asc: false
    };
    if(JSON.stringify(filter) !== JSON.stringify(filtercomp)) {
        console.log("为何再一次变动了回调=filtercomp=",filtercomp);
        setFilter(filtercomp);
    }
  }, [query , props.filter,  filter]);*/
  console.log("共同祖先简易框query=",query, "上一级给的history=",history);
    // const [cod, setCod] = React.useState<string|undefined>('sdh爲了dd');
  //控件<Stack 是堆叠式的，像导航条；适用同一个模板显示只需上级给下级参数调整的场景。根据上一叠页面选择触发状态relation给下一叠参数来控制下一级显示；更多嵌套很困难。
  //CSS: sticky元素关键是在其父元素，爷爷元素即使高度固定且高度很小的比sticky元素父元素还小的也可以，关键需要更上面的祖先元素有一个overflow:auto就行。<div>儿子高度可以超出父div且正常显示。
  return (
    <React.Fragment>
        <div
            css={{
              width:'100%',
            }}
        >
            <Text variant="h3">设备台账</Text>
        </div>
        <Stack
               navStyle={css({ position: 'sticky',  top: 0,})}
               style={{
                   overflow: 'unset'
               }}
          index={index}
          navHeight={60}
          onIndexChange={i => setIndex(i)}
          items={[
            {
              title: (
                <SearchTitle >
                  <SearchDeviceBox
                    css={{ borderBottom: "none" }}
                    label="模糊搜设备代码,在过滤器范围内"
                    query={query}
                    setQuery={setQuery}
                  />
                </SearchTitle>
              ),
              content: (
                <StackItem className="ItemConte"
                    css={{
                           marginBottom: `${barHeight}`,
                    }}
                  style={{ position: undefined, boxShadow:undefined }}
                >
                  <div className="DlistInnerF1"
                     css={{overflowY: "auto", height: "100%",}}
                  >

                     <DeviceListInner  eqps={props.eqps}  filter={props.filter}  query={query}/>
                  </div>
                </StackItem>
              )
            },
          ]}
        />
   </React.Fragment>
  );

};




//报错Cannot read property 'map' of null标记出错代码行，竟可能会差错！实际错误点实在下方，报错指示却在上方的代码行，两处都有.map的代码。
//<Stack 组件，实际上是内部状态控制界面的呈现，实际上DOM数据内容并没有同步地变更，只是页面切换着看；适用数据库组织的；PK的，导航堆叠场景实际是源代码组织的。
//幸运的事！！<StackItem>底下内嵌的组件可以做到每一个都是独立自主的。这里<FollowingRecipes key={}/>对每一个按钮进入和后退的，虽然组件同一个，但内部状态数据可各自独立的。
//overflowY:"scroll"若遇到 css={{height: "100%", 和 minHeight: '300px' 不能同时添加的。overflowY:和"100%"一起使用，且要在内层DIV上用。组件中间层可能屏蔽掉。
//多层DIV的height: "100%", 需要在中间层次添加100%传递父辈限制大小，配合内部层的overflowY: "scroll",才能滚动。
//[query] = React.useState(""); 为何导致 if(!query) 成立， ""即空字符串等于false。
